<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      height: 300px;
      background-color: pink;
      position: relative;
    }

    /* 兼容性非常好，而且是绝对的居中 比flex还靠谱 */
    .container {
      height: 100px;
      background-color: aqua;
      /* 加了这个后， 父元素宽度 = 块级宽度 + left + right + margin-left + margin-right  */
      position: absolute;
      /* 然后此时如果连宽度都没设置的话，left和right还同时设置为0 */
      /* 就相当于宽度占据百分之百 此时套公式如： 800=auto+0+0+0+0  margin-left/right默认为0  */
      /* width: 100%; */
      
      /* 但是如果此时给该盒子设置了宽度，根据公式 800=200+0+0+0+0 显然不成立
         因此剩下的宽度通常会给margin-right，这个具体给左还是给右，看情况 800=200+0+0+0+600 */
      width: 200px;

      /* 配置水平居中或垂直居中，就需要这样设置 */
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;

      /* 非绝对定位元素之所以加上这个可以居中，是因为 父元素宽度=块级宽度 + margin-left + margin-right */
      /* 然后此时margin两边都是auto，默认平均分配 */

      /* 对于绝对定位元素里面，如果要水平居中的话，也可以直接使用margin:0 auto; 同时配合left/right为0*/
      /* 因为既然800=200+0+0+0+0不成立自动全给margin-left或者margin-right，
         还不如我们手动left和right两边都设置成auto，这样就同样可以居中了 */
      /* margin: 0 auto; */

      /* 那么垂直居中也是同理的，我们设置top和bottom为0，然后再设置margin-top/bottom为auto */
      /* margin: auto 0; */

      /* 水平垂直居中的话，就四个方向都设置为0，同时设置margin四个方向都为auto */
      margin: auto;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <span class="container"></span>
  </div>

</body>
</html>